<template>
  <el-container>
    <el-main>
      <el-form :model="parkingForm" ref="parkingForm" :label-position="labelPosition" label-width="75px">
        <el-row class="headSearch">条件检索</el-row>
        <el-row class="rr">
          <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
            <el-form-item prop="parkNo" label-width="0">
              <el-input prefix-icon="el-icon-search" placeholder="车场名称" v-model="parkingForm.parkNo" clearable/>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="margin:10px 24px 0">
            <el-button class="btnSearch1" type="primary" @click="submitForm()">搜索</el-button>
          </el-col>
        </el-row>
        <collapse-vertical>
          <el-row class="rr" v-show="item3Seem">
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="dwname" label="经营单位">
                  <el-input placeholder="经营单位" readonly @click.native="openDw" v-model="parkingForm.dwname"/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="parkname"  label="车场名称">
                  <el-input placeholder="车场名称" readonly @click.native="openPark" v-model="parkingForm.parkname"/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="personname"  label="设备厂商">
                  <el-input placeholder="设备厂商" readonly @click.native="openPerson" v-model="parkingForm.personname" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="backPersonname" label="车场位置">
                  <el-input placeholder="经纬度" v-model="parkingForm.berthNo" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
            </el-row>
            <el-row>
            </el-row>
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="berthNo" label="信用代码">
                  <el-input placeholder="信用代码" v-model="parkingForm.berthNo" clearable/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item prop="outType" label="接入方式">
                  <el-radio-group v-model="parkingForm.outType" placeholder="出场类型">
                    <el-radio v-for="item in outTypes" :label="item.id">{{item.value}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          <el-row>
            <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="hidBtn">
              <el-button @click="submitForm()" size="mini">查询</el-button>
              <el-button @click="resetForm('parkingForm')" size="mini">重置</el-button>
            </el-col>
          </el-row>
          </el-row>
        </collapse-vertical>
        <el-row style="text-align: center">
          <el-button style="border: none;background-color: transparent" size="small" @click="item3Seem = !item3Seem;isDisplay=!isDisplay" :icon="isDisplay?iconUp:iconDown"></el-button>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import { searchParkingDetail } from '../../../api/operating/parkingFlow'
  import { selDictonary } from '../../../api/dictionary'
  import CollapseVertical from '../../../utils/collapseVertical'
  export default {
    name: 'parking-flow-form',
    components: { CollapseVertical },
    data() {
      return {
        iconUp: 'el-icon-arrow-up',
        iconDown: 'el-icon-arrow-down',
        isDisplay: false,
        item3Seem: false,
        labelPosition: 'left',
        parkingForm: {
          dw: '', // 单位编号
          dwname: '', // 单位名称
          parkno: '', // 车场编号
          parkname: '', // 车场名称
          roadno: '', // 收费路段编号
          roadname: '', // 收费路段名称
          personname: '', // 收费员
          personno: '', // 收费员编号
          operateTime: '', // 操作时间
          berthNo: '', // 泊位编号
          accountNo: '', // 流水号
          parkNo: '', // 车牌号
          carType: '', // 车辆类型
          type: '', // 车辆出入场类型
          dataType: '', // 数据类型
          outType: '', // 出场类型
          backState: '', // 补缴状态
          backTime: '', // 补缴时间
          backPersonname: '', // 补缴收费员
          backPersonno: '', // 补缴收费员编号
          backType: [] // 补缴方式
        },
        carTypes: [], // 车辆类型
        types: [
          { id: '1', value: '在停车' },
          { id: '2', value: '出场车' }
        ], // 类型
        dataTypes: [], // 数据类型
        outTypes: [
          { id: '1', value: '接入流水' },
          { id: '2', value: '接入泊位' },
          { id: '4', value: '单独采集' },
        ], // 出场类型
        backStates: [], // 补缴状态
        backTypes: [] // 补缴方式
      }
    },
    props: ['dw_name', 'road_name', 'park_name', 'person_name', 'back_name', 'pageNum', 'pageSize'],
    watch: {
      dw_name: function(val) {
        this.parkingForm.dw = val.orgno
        this.parkingForm.dwname = val.orgname
      },
      road_name: function(val) {
        this.parkingForm.roadname = val.unitname
        this.parkingForm.roadno = val.unitno
      },
      park_name: function(val) {
        this.parkingForm.parkname = val.parkname
        this.parkingForm.parkno = val.parkno
      },
      person_name: function(val) {
        this.parkingForm.personno = val.sfzhm
        this.parkingForm.personname = val.name
      },
      back_name: function(val) {
        this.parkingForm.backPersonno = val.sfzhm
        this.parkingForm.backPersonname = val.name
      },
      pageNum: function(val) {
        this.submitForm()
      },
      pageSize: function(val) {
        this.submitForm()
      }
    },
    mounted: function() {
    },
    methods: {
      resetForm: function(parkingForm) {
        this.$emit('update:dw_name', '')
        this.$emit('update:road_name', '')
        this.$emit('update:park_name', '')
        this.$emit('update:person_name', '')
        this.$emit('update:back_name', '')
        this.$refs[parkingForm].resetFields()
      },
      openDw: function() {
        this.$emit('dwboolean', true)
      },
      openPark: function() {
        this.$emit('parkboolean', true)
      },
      openRoad: function() {
        this.$emit('roadboolean', true)
      },
      openPerson: function() {
        this.$emit('personboolean', true)
      },
      openBack: function() {
        this.$emit('backboolean', true)
      }
    }
  }
</script>

<style scoped>
  #slideRow{
    border: none;
  }
  .hidBtn{
    margin-left: 8px
  }
  .hidBtn .el-button{
    margin-top: 10px;
    width: 45px;
    height: 22px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #444444;
    padding: 3px 10.5px;
  }
  .el-main{
    padding: 0px;
    margin: 0;
  }
  .headSearch{
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #7F8CA6;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-top: 22px;
  }
  .btnSearch1{
    width: 80px;
    height: 24px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 28px;
  }
  .rr{
    margin-left: 25px;
  }
  .el-footer {
    text-align: center;
    padding: 0;
    margin: 0;
    height: 0px;
  }
  .el-main{
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .el-form-item{
    height: 48px;
    margin-bottom: 8px;
  }
</style>
